<template>
	<!-- 更多视频 -->
	<view class="page">
		<c-scroll-list :api="api" :apiParams="apiParams" @load="load">
			<view class="v_item" v-for="(v,i) in videoList" :key="i">
				<image class="img" :src="vuex_imgUrl+v.mainImg" mode=""></image>
				<view class="mask" @click="playVideoFn(v.videos)">
					<image class="play" src="/static/tabbar/play.png" mode=""></image>
				</view>
			</view>
		</c-scroll-list>
		<c-playVideo :show.sync="playShow" :url="playUrl" />
	</view>
</template>

<script>
	export default {
		name: "moreVideos",
		data() {
			return {
				api: this.$api.getVideoList,
				apiParams: {
					isHot: 0, //1-推荐,0-正常
				},
				videoList: [],
				playShow: false,
				playUrl: ''
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			//小程序视频列表
			load(res) {
				console.log('列表', res);
				this.videoList = res.list
			},
			// 播放视频
			playVideoFn(v) {
				this.playUrl = this.vuex_imgUrl + JSON.parse(v)[0];
				this.playShow = true
			}
		}
	};
</script>

<style lang="scss" scoped>
	.v_item {
		width: 686rpx;
		height: 386rpx;
		border-radius: 12rpx;
		position: relative;
		margin: 24rpx auto 0;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}

		.mask {
			width: 686rpx;
			height: 386rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;

			.play {
				width: 56rpx;
				height: 56rpx;
			}
		}

	}
</style>